<template>
  <PageLayout>
    <!-- <template #extra>
      <div class="bg-fff p-24 mb-24 d-flex j-sb card-list">
        <div>
          <div>100</div>
          <div>当前代理商总数</div>
        </div>
        <div>
          <div>239</div>
          <div>昨日新增</div>
        </div>
        <div>
          <div>239</div>
          <div>缺料代理商</div>
        </div>
      </div>
    </template> -->
    <template #header>
      <BasicForm
        :options="queryOptions"
        @ok="onQueryDataByParams"
        :labelWidth="100"
      ></BasicForm>
    </template>
    <div class="table-box">
      <div class="head-box">
        <div class="title">代理商管理</div>
        <a-space :size="16">
          <a-button type="primary" @click="edit()">新建</a-button>
        </a-space>
      </div>
      <div class="bg-fff">
        <!-- :apiFetch="apiFetch"  -->
        <BasicTable
          ref="tableRef"
          :columns="columns"
          :query-params="queryData"
          :apiFetch="postAgentPage"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <a-space class="space-btn--box" :size="10">
                <a class="btn" @click="toDetail(record)">详情</a>
                <a class="btn" @click="edit(record)">编辑</a>
                <a class="btn" @click="changeStatus(record)">{{
                  record.status == 0 ? "禁用" : "启用"
                }}</a>
                <a class="btn" @click="resetVersion(record)">重置绑定</a>
                <a class="btn" @click="remove(record)">删除</a>
                <a class="btn" @click="resetPwd(record)">重置密码</a>
              </a-space>
            </template>
          </template>
        </BasicTable>
      </div>
    </div>
  </PageLayout>
</template>

<script name="agent-manage-list" setup>
import {
  postAgentPage,
  postAgentDelete,
  postAgentUpdateStatus,
  postAgentResetWx,
  postAgentResetPwd,
} from "@/api/common";
import { useStoreCommonEnum } from "@/store";
import { comfirmModal } from "@/hooks/useModal";
import { message } from "ant-design-vue";
const storeCommonEnum = useStoreCommonEnum();
const router = useRouter();
const queryOptions = ref([
  {
    name: "代理商账号",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "username",
  },
  {
    name: "代理商姓名",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "realName",
  },
  {
    name: "手机号码",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "phone",
  },
  {
    name: "状态",
    type: "select",
    value: undefined,
    placeholder: "请选择",
    filed: "status",
    list: [
      {
        label: "已启用",
        value: 0,
      },
      {
        label: "已禁用",
        value: 1,
      },
    ],
    attrs: { allowClear: true },
  },
  {
    name: "创建时间",
    type: "range-picker",
    value: [],
    placeholder: "请选择",
    filed: "rangeDate",
    dateFields: ["startCreateTime", "endCreateTime"],
  },
]);
const columns = [
  {
    title: "序号",
    dataIndex: "index",
    width: "80px",
    customRender: (record) => `${record.index + 1}`,
  },
  {
    title: "代理ID",
    dataIndex: "id",
    key: "id",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "代理商账号",
    dataIndex: "username",
    key: "username",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "代理商姓名",
    dataIndex: "realName",
    key: "realName",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "手机号码",
    dataIndex: "phone",
    key: "phone",
    width: "150px",
    ellipsis: true,
  },

  {
    title: "代理商类型",
    dataIndex: "roleType",
    key: "roleType",
    width: "150px",
    ellipsis: true,
    customRender: ({ record }) => {
      return record.roleType == 0 ? "普通代理商" : "vip代理商";
    },
  },
  {
    title: "关联的门店数量",
    dataIndex: "shopNum",
    key: "shopNum",
    width: "150px",
    ellipsis: true,
  },
  // {
  //   title: "关联的设备数量",
  //   dataIndex: "deviceNum",
  //   key: "deviceNum",
  //   width: "150px",
  //   ellipsis: true,
  // },
  {
    title: "创建时间",
    dataIndex: "createTime",
    key: "createTime",
    width: "150px",
    ellipsis: true,
  },

  {
    title: "状态",
    dataIndex: "status",
    key: "status",
    width: "150px",
    ellipsis: true,
    customRender: ({ record }) => {
      return record.status == 0 ? "已启用" : "已禁用";
    },
  },

  {
    title: "操作",
    fixed: "right",
    dataIndex: "action",
    key: "action",
    width: 380,
  },
];

const queryData = reactive({});
const tableRef = ref(null);
const onQueryDataByParams = (params) => {
  for (let key in params) {
    queryData[key] = params[key];
  }
  tableRef.value.refreshTableData();
};

const edit = (record) => {
  router.push({
    path: "/agent/manage/edit",
    query: {
      id: record?.id,
    },
  });
};
const toDetail = (record) => {
  router.push({
    path: "/agent/manage/detail",
    query: {
      id: record?.id,
    },
  });
};

const changeStatus = (record) => {
  const title = record.status == 0 ? "禁用" : "启用";
  comfirmModal({
    content: `确认${title}`,
    onOk() {
      postAgentUpdateStatus({
        id: record.id,
        status: record.status == 0 ? 1 : 0,
      }).then(() => {
        message.success(`${title}成功`);
        tableRef.value.fetch();
      });
    },
  });
};
const resetVersion = (record) => {
  // const title = record.status == 0 ? "禁用" : "启用";
  comfirmModal({
    content: `确认重置`,
    onOk() {
      postAgentResetWx({
        id: record.id,
      }).then(() => {
        message.success(`重置成功`);
        tableRef.value.fetch();
      });
    },
  });
};
const remove = ({id}) => {
  comfirmModal({
    content: "确认删除",
    onOk() {
      postAgentDelete({ id }).then(() => {
        message.success("删除成功");
        tableRef.value.fetch();
      });
    },
  });
};

const resetPwd = ({ id }) => {
  comfirmModal({
    content: "确定重置密码为123456吗？",
    onOk() {
      postAgentResetPwd({ id }).then(() => {
        message.success("重置成功");
        tableRef.value.fetch();
      });
    },
  });
};

const dataSource = ref(
  Array.from({ length: 11 }, () => ({
    spaceName: "2121",
  }))
);
</script>

<style lang="less" scoped>
.card-list {
  margin-bottom: 24px;
  display: flex;
  gap: 50px;
  > div {
    // flex: 1;
    width: 300px;
    padding: 10px;
    // height: 100px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 30px;
    > div:first-child {
      font-size: 48px;
      font-weight: 600;
    }
    &:nth-child(1) {
      background: #02a7f0;
    }
    &:nth-child(2) {
      background: #66cc99;
    }
    &:nth-child(3) {
      background: #e62129;
    }
  }
}
</style>
